<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u--input
              customStyle="height:100%;width: 90%;margin: auto;"
              placeholderStyle="color: #fff;"
              placeholder="搜索仓库"
              border="none"
              color="#fff"
              shape="circle"
              v-model="search"
              @confirm="searchChange"
            >
              <clIcon
                slot="prefix"
                type="icon-sousuo_o"
                color="#fff"
                size="25"
              ></clIcon>
            </u--input>
          </view>
        </template>
      </view>
    </hx-navbar>
    <view class="u-page m-t-140">
      <u-list @scrolltolower="scrolltolower" height="744px">
        <u-list-item v-for="(item, index) in indexList" :key="index">
          <liu-swipe-action
            ref="liuSwipeAction"
            :index="index"
            @clickItem="liuClickItem"
          >
            <u-cell :title="item.name" @click="go(item)">
              <view slot="right-icon" class="flex">
                <text v-if="item.isDetail" class="m-r-10"
                  ><u-tag text="明细" plain> </u-tag
                ></text>
                <text v-if="item.isNegStock" class="m-r-10"
                  ><u-tag text="不负库存" plain> </u-tag
                ></text>
                <text v-if="item.isBatchNumber" class="m-r-10"
                  ><u-tag text="批次" plain> </u-tag
                ></text>
              </view>
            </u-cell>
          </liu-swipe-action>
        </u-list-item>
        <u-loadmore
          dashed
          line
          :status="status"
          loadingText="努力加载中"
          loadmoreText="轻轻上拉"
          nomoreText="实在没有了"
        />
      </u-list>
    </view>
    <u-toast ref="uToast"></u-toast>
    <!-- 筛选弹框 侧边栏 -->
    <u-popup
      class="sidebar"
      :show="show"
      mode="right"
      overlayOpacity="0.3"
      @close="close"
      @open="open"
    >
      <view class="pop-view p-t-220">
        <view>
          <view class="cl-cell flex flex-sb">
            <view class="flex" style="flex: 1" @click="toShop">
              <view class="title"> 门店 </view>
              <view class="value" v-if="sideObj.label">
                {{ sideObj.label }}
              </view>
            </view>
            <view class="icon">
              <u-icon
                name="close"
                color="#999"
                size="20"
                v-if="sideObj.shop"
                @click="sideObj.shop = ''"
              ></u-icon>
              <u-icon name="arrow-right" color="#999" v-else></u-icon>
            </view>
          </view>
          <view class="cl-cell flex flex-sb">
            <view class="flex">
              <view class="title"> 类型 </view>
              <view class="value">
                <!-- {{sideObj.shop}} -->
                <view class="ellipsis"> 布匹、色卡\样板、剪样、纱线 </view>
              </view>
            </view>
            <view class="icon">
              <u-icon name="arrow-right" color="#999"></u-icon>
            </view>
          </view>
          <u-cell title="显示停用">
            <view slot="value">
              <u-switch v-model="isEnable" size="20"></u-switch>
            </view>
          </u-cell>
          <u-cell title="显示加工商仓库" class="grey">
            <view slot="value">
              <u-switch v-model="sideObj.inventory" size="20"></u-switch>
            </view>
          </u-cell>
        </view>
        <view class="fot-btn flex flex-sw p-l-10 p-r-10">
          <u-button
            text="重置"
            shape="circle"
            class="reset m-r-10"
            @click="
              () => {
                sideObj = {
                  shopId: null,
                  label: null,
                };
              }
            "
          ></u-button>
          <u-button
            text="搜索"
            shape="circle"
            color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
            @click="onSearch"
          ></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import {
  getlist,
  addData,
  delectData,
} from "@/apis/bill/information/warehouse";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      status: "loadmore", // 加载更多状态
      search: null,
      indexList: [],
      config: {
        title: "仓库",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
          {
            key: "btn2",
            icon: "&#xe888;",
            position: "left",
          },
        ],
      },
      pages: {
        current: 1,
        size: 20,
      },
      show: false,
      isEnable: true,
      sideObj: {
        shopId: null,
        label: null,
      },
    };
  },
  computed: {},
  onLoad() {
    this.initData();
  },
  onShow() {
    uni.$on("on-selected-shop", (data) => {
      this.sideObj.label = data.label;
      this.sideObj.shopId = data.value;
      uni.$off("on-selected-shop");
    });
  },
  methods: {
    // 删除功能
    neoIconDelect(id) {
      return delectData(id);
    },
    // 侧拉框视频
    liuClickItem(item) {
      // 编辑
      if (item.id == 1) {
        this.$refs.liuSwipeAction[item.index].reset();
        this.$Router.push({
          path: "/pages/application/pages/information/warehouse/warehouse-details/warehouse-details",
          query: {
            id: this.indexList[item.index].id,
          },
        });
      } else if (item.id == 2) {
        // 删除
        this.$refs.liuSwipeAction[item.index].reset();
        this.neoIconDelect(this.indexList[item.index].id).then((res) => {
          if (!res.flag) return;
          this.indexList.splice(item.index, 1);
          this.$refs.uToast.show({
            type: "success",
            title: "",
            message: "删除成功",
            complete() {},
          });
        });
      }
    },
    onSearch() {
      this.indexList = [];
      this.pages.current = 1;
      this.initData();
      this.show = false;
    },
    // 侧边栏
    close() {
      this.show = false;
    },
    open() {},
    // 跳转门店
    toShop() {
      uni.navigateTo({
        url: "/pages/selects/shop/index",
      });
    },
    go(val) {
      let { type } = this.$Route.query;
      // console.log("type",type);
      // 可能有些页面需要2次进入到这个仓库
      if (type == "list" || type == "list2") {
        setTimeout(() => {
          uni.$emit("on-warehouse-data", val, type);
        }, 300);
        uni.navigateBack();
      } else if (type == "table") {
        this.$Router.push({
          path: "/pages/application/pages/cloth/inventory-table/index",
        });
      } else {
        this.$Router.push({
          path: "/pages/application/pages/information/warehouse/warehouse-details/warehouse-details",
          query: {
            id: val.id,
          },
        });
      }
    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
      let billId = {
        data: {
          isEnable: this.isEnable,
          keywords: this.search,
          shopId: this.sideObj.shopId,
        },
        page: {
          current: this.pages.current,
          size: this.pages.size,
          sort: "",
          order: "desc",
          total: 0,
          orders: [
            {
              column: "create_time",
              asc: false,
            },
          ],
        },
      };
      uni.showLoading({
        title: "加载中",
      });
      this.status = "loading";
      getlist(billId)
        .then((res) => {
          this.search = null;
          if (!res.flag) return;
          const data = res.data || {};
          if (data.records.length <= 10) {
            this.status = "nomore";
          } else {
            this.status = "loadmore";
          }
          this.indexList = [...this.indexList,...data.records];
        })
        .finally((_) => {
          uni.hideLoading();
        });
    },
    scrolltolower() {
      this.pages.current += 1;
      this.initData();
    },
    getName(name) {
      return "bei";
    },
    searchChange() {
      this.indexList = [];
      this.pages.current = 1;
      this.initData();
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        this.$Router.push({
          name: "informationWarehouseWarehouseDetails",
        });
      } else if (item.key === "btn2") {
        this.show = true;
        // this.productPopShow = !this.productPopShow;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}

.ellipsis {
  overflow: hidden;
  height: 40rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 332rpx;
}
</style>
